<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/myCssReset.css">
  <link rel="stylesheet" href="../css/index.css">
  <title>有间名宿网——特色旅游住宿，各类民宿房！</title>
</head>
<body>
  <!-- 固定页头 -->
  <header>
    <div class="headbox">
      <div >
        <div class="shou">
          <ul>
            <li><a href="http://127.0.0.1:9000/index.html">首页</a></li>
            <li><a href="http://127.0.0.1:9000/html/search.html">房间</a></li>
            <li><a href="http://127.0.0.1:9000/html/story.html">故事</a></li>
          </ul>
        </div>
      </div>
      <div class="log">
        <a href="http://127.0.0.1:9000/html/login.html">登录</a>
        <a href="http://127.0.0.1:9000/html/register.html">注册</a>
      </div>
      <div class="user">
        <a href="./html/order.html"></a>
        <span></span>
      </div>
    </div>
  </header>
  <!-- 横幅和搜索框 -->
  <nav class="nav">
    <div class="navbox">
        <div>
          <a href="./html/search.html"></a>
        </div>
        <!--搜索框 -->
        <div class="reservebox">
          <ul class="clearfix">
            <li><input type="text" placeholder="热门城市" value=""></li>
            <li><input type="text" placeholder="入住时间"></li>
            <li><input type="text" placeholder="离开时间"></li>
            <li><input type="text" placeholder="入住人数"></li>
            <li><a href="#">开始预定</a></li>
          </ul>
        </div>
        <div class="remind">
          <ul>
          	<!-- li标签动态添加  --> 					
          </ul>
        </div>
    </div>
  </nav>
  <!-- 安全栏 -->
 <section class="safe">
    <div>
      <ul>
        <li>
          <img src="./img/sm_icon/pc_safe.png" alt="">
          <p>10万出行意外险/身份证信息互联网核查</p>
        </li>
        <li>
          <img src="./img/sm_icon/pc_server.png" alt="">
          <p>2623位试睡体验师/90万套房源遍布海内外</p>
        </li>
        <li class="last">
          <img src="./img/sm_icon/pc_clear.png" alt="">
          <p>被单每客一换（高品质洗漱用品）/专业保洁团队</p>
        </li>
      </ul>
    </div>
  </section>
 <!-- 房间区 -->
  <section class="room">
    <div class="roomarea">
      <div class="tit">
        <h2>寻找你未曾相遇的风景</h2>
        <span>热门城市</span>
      </div>
      <div class="roomlist">
        <ul>
          <li>
            <a href="">
              <img src="" alt="">
              <div>
                <span></span>
                <span></span>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="" alt="">
              <div>
                <span></span>
                <span></span>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="" alt="">
              <div>
                <span></span>
                <span></span>
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <img src="" alt="">
              <div>
                <span></span>
                <span></span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </section>
  <!-- 认证区 -->
  <section class="idt">
    <div class="idt-box">
      <div class="idt-tit">
        <h3>为什么选择有间</h3>
      </div>
      <div class="content">
        <ul class="clearfix">
          <li>
            <img src="./img/sm_icon/index_bz1.png" alt=""> 
            <p>房源100%人工审核</p> 
          </li>
          <li>
            <img src="./img/sm_icon/index_bz2.png" alt=""> 
            <p>付款到有间 资金有保障</p> 
          </li>
          <li>
            <img src="./img/sm_icon/index_bz3.png" alt=""> 
            <p>保障入住人身安全</p> 
          </li>
          <li>
            <img src="./img/sm_icon/index_bz4.png" alt=""> 
            <p>地主之谊出行无忧</p> 
          </li>          
        </ul>
      </div>
    </div>
  </section>
  <!-- 故事区 -->
  <section class="story">
    <div class="storyarea">
      <!-- 标题区 -->
      <div class="tit">
        <h2>出门在外的一千零一夜</h2>
        <p>旅行故事</p>
        <a href="./html/story.html">探索更多></a>
      </div>
      <!-- 轮播图 -->
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide"> 
                  <div class="sw-img">
                    <a href="l"></a>
                  </div>
                  <div class="sw-text">
                    <h3></h3>
                    <p></p>
                    <a href="">查看详情></a>
                  </div>                
              </div>
              <div class="swiper-slide">
                <div class="sw-img">
                  <a href=""></a>
                </div>
                <div class="sw-text">
                  <h3></h3>
                  <p></p>
                  <a href="">查看详情></a>
                </div> 
              </div>
              <div class="swiper-slide">
                <div class="sw-img">
                  <a href=""></a>
                </div>
                <div class="sw-text">
                  <h3></h3>
                  <p></p>
                  <a href="">查看详情></a>
                </div> 
              </div>
              <div class="swiper-slide">
                <div class="sw-img">
                  <a href=""></a>
                </div>
                <div class="sw-text">
                  <h3></h3>
                  <p></p>
                  <a href="">查看详情></a>
                </div> 
              </div>
          </div>
          <!-- 如果需要分页器 -->
          <!-- <div class="swiper-pagination"></div> -->
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div> 
          <!-- 如果需要滚动条 -->
          <!-- <div class="swiper-scrollbar"></div> -->
      </div>
    </div>
  </section>
  <!-- 页脚 -->
  <footer>
    <div class="box">
      <div class="row1">
        <ul>
          <li>
            <a href="javscrip:void">免责声明</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">平台协议与规则</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">交易规则</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">关于我们</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">联系我们</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">法律声明</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">新手指南</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">帮助中心</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">新闻资讯</a><span>|</span>
          </li>
          <li>
            <a href="javscrip:void">媒体报道</a>
          </li>
        </ul>  
      </div>
      <div class="row2">
        <p>
          客服电话:400-056-0055或010-89180879
          客户服务:service@yms.com
          意见反馈:feedback@yms.com
        </p> 
      </div>
      <div class="row3">
        <span>网站备案/许可证号: </span>
        <a href="javscrip:void">京ICP备12043553号-3 </a>
        <a href="javscrip:void">京公网安备11010502037765 </a>
        <a href="javscrip:void">营业执照编号104555056 </a>
        <span>北京爱游易科技有限公司</span>
      </div>
    </div>
  </footer>
  <!-- js文件 -->
  <script src="./js/header.js"></script>
  <script src="./js/swiper-bundle.min.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>